<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>记事本</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            background-color: #f4f4f4;
            color: #333;
            padding: 20px;
        }

        #app {
            width: 100%;
            max-width: 800px;
            margin: 0 auto;
            padding: 20px;
            background-color: #fff;
            border-radius: 8px;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        }

        .header {
            text-align: center;
            margin-bottom: 20px;
        }

        .header h1 {
            font-size: 2em;
            margin: 0;
            color: #333;
        }

        .header .new-todo {
            width: 70%;
            padding: 10px;
            border: 1px solid #ccc;
            border-radius: 4px;
            font-size: 1em;
            margin-right: 10px;
        }

        .header .add {
            padding: 10px 20px;
            background-color: #007bff;
            color: white;
            border: none;
            border-radius: 4px;
            cursor: pointer;
        }

        .header .add:hover {
            background-color: #0056b3;
        }

        .main {
            margin-bottom: 20px;
        }

        .todo-list {
            list-style-type: none;
            padding: 0;
        }

        .todo {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 10px;
            border-bottom: 1px solid #ddd;
        }

        .todo:last-child {
            border-bottom: none;
        }

        .view {
            display: flex;
            align-items: center;
        }

        .index {
            margin-right: 10px;
            font-weight: bold;
        }

        .view label {
            flex-grow: 1;
        }

        .destroy {
            background-color: #75b6f8;
            color: white;
            border: none;
            padding: 5px 10px;
            border-radius: 4px;
            cursor: pointer;
        }

        .destroy:hover {
            background-color: #7fa4fb;
        }

        .footer {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 10px;
            border-top: 1px solid #ddd;
        }

        .todo-count {
            font-size: 1.2em;
            font-weight: bold;
        }

        clear-completed {
            padding: 10px 20px;
            background-color: #007bff;
            color: white;
            border: none;
            border-radius: 4px;
            cursor: pointer;
        }

        .clear-completed:hover {
            background-color: #0056b3;
        }
    </style>
</head>

<body>
    <div id="app">
        <!-- 输入框 -->
        <header class="header">
            <h1>小黑记事本</h1>
            <input v-model.trim="iptList" @keyup.enter="add" placeholder="请输入任务" class="new-todo" />
            <button @click="add" class="add">添加任务</button>
        </header>
        <!-- 列表区域 -->
        <section class="main">
            <ul class="todo-list">
                <li v-for="(item, index) in list" :key="item.id" class="todo">
                    <div class="view">
                        <span class="index">{{ index + 1 }}.</span> <label>{{ item.task }}</label>
                        <button @click="del(item.id)" class="destroy">删除</button>
                    </div>
                </li>
            </ul>
        </section>
        <!-- 统计和清空 -->
        <footer v-if="list.length > 0" class="footer">
            <!-- 统计 -->
            <span class="todo-count">合 计:<strong> {{ list.length }} </strong></span>
            <!-- 清空 -->
            <button @click="clear" class="clear-completed">
                清空任务
            </button>
        </footer>
    </div>
</body>

</html>
<script src="./js/2.7.14_dist_vue.js"></script>
<script>
    const app = new Vue({
        el: '#app',
        data: {
            iptList: '',
            list: [
                { id: 1, task: '吃饭饭' },
                { id: 2, task: '蹲坑' }
            ]
        },
        methods: {
            del(id) {
                this.list = this.list.filter(item => item.id !== id)
            },
            add() {
                if (this.iptList.length === 0) {
                    return alert("不允许输入为空哦")
                }
                this.list.unshift({
                    id: +new Date(),
                    task: this.iptList
                })
                this.iptList = ''
            },
            clear() {
                this.list = []
            }
        }
    })
</script>